<template>
    <div class="recommend-container">
      <ul class="recommend" v-if="recommendShopList.length>0">
        <!--<li class="recommend_item" v-for="(recommend,index) in recommendShopList">-->
          <!--<img :src="recommend.thumb_url"/>-->
          <!--<h4 class="item-title">{{recommend.short_name}}</h4>-->
          <!--<div class="item-bottom">-->
            <!--<span class="item-price">${{recommend.price/100}}</span>-->
            <!--<span class="item-sales">{{recommend.sales_tip}}</span>-->
            <!--<button class="item-btn">找相关</button>-->
          <!--</div>-->
        <!--</li>-->

        <shoplist
          tag="li"
          v-for="(recommend,index) in recommendShopList"
          :key="index"
          :recommend=recommend>
        </shoplist>
      </ul>
    </div>
</template>

<script>
  import Shoplist from './../../component/Shoplist/Shoplist'
  import {mapState} from 'vuex'
    export default {
      name: "recommend",
      computed:{
        ...mapState(['recommendShopList'])
      },
      mounted(){
        this.$store.dispatch('reqRecommendShopList')
      },
      components:{
        Shoplist
      }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .recommend-container
    width 100%
    height 100%
    background-color #f5f5f5
    .recommend
      display flex
      flex-direction row
      flex-wrap wrap
      background-color #f5f5f5
      margin-bottom 50px
</style>
